// import React from "react";
import React from "./react";
const ThemeColor  = React.createContext() // 

const baseStyle = {
  margin: '10px',
  padding: '10px'
}

function Title (){
  return <ThemeColor.Consumer>
    {
      (contextValue)=> <div style={{...baseStyle,border:`5px solid ${contextValue.color }`}}>
      Title
      </div>
    }
      
  </ThemeColor.Consumer> 
}

class Header extends React.Component{
  static contextType = ThemeColor
  render(){
    return (
      <div style={{...baseStyle,border:`5px solid ${this.context.color}`}}>
        <Title/>
      </div>
    )
  }
}

class Main extends React.Component{
  static contextType = ThemeColor
  render(){
    return (
      <div style={{...baseStyle,border:`5px solid ${this.context.color}`}}>
        <button onClick={()=>this.context.changeColor('red')}>变红</button>
        <button  onClick={()=>this.context.changeColor('yellow')}>变黄</button>
      </div>
    )
  }
}


class Page extends React.Component{
    constructor(props){
      super(props)
      this.state={
        color:'black'
      }
    }

    changeColor =(color)=>{
      this.setState({
        color
      })
    }

    render(){
    const value = {
      color:this.state.color,
      changeColor:this.changeColor
    }
    return (
        <ThemeColor.Provider value={value}>
          <div style={{width: '250px',border: `5px solid ${this.state.color}`}}>
              <Header/>
              <Main />
          </div>
        </ThemeColor.Provider>
    );
    }
}

export default Page